<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row>
          <a-col :span="24">
            <a-form-item label="城市选择">
              <a-input-group compact >
                <!-- <v-region type="column" :town="true" @values="regionChange"></v-region> -->
                <v-region type="group" :town="true" @values="regionChange"></v-region>
                <a-input style="width:200px; margin-left:10px;" placeholder="请输入社区名称" v-model="search.shequ" />
                <a-button type="primary" icon="search" style="margin-left: 8px; border-radius:4px;">查询</a-button>
                <a-button type="primary" icon="reload" style="margin-left: 8px; border-radius:4px;">重置</a-button>
              </a-input-group>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 图表区域 -->
    <a-row>
      <a-spin tip="Loading..." :spinning="spinning">
        <a-col :span="24">
          <template>
            <div id="myChart" style="width:100%;height:600px;margin-top:50px;"></div>
          </template>
        </a-col>
      </a-spin>
    </a-row>

  </a-card>
</template>

<script>
  export default {
    data () {
      return {
        search:{
          shequ:'',  //社区名称
        },
        spinning: false, //加载特效
      }
    },
    watch: {
    },
    created () {
    },
    mounted () {
      this.$nextTick(() => {
        this.spinning = true;
        setTimeout(() => {
            this.getdata(); //调用数据采集次数
            this.spinning = false;
        }, 1000);
      })
    },
    methods: {
      getdata: function (e) {
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById('myChart'),'macarons')
          // 指定图表的配置项和数据
          var option = {
              title: { text: '慢性病统计图' },
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                      type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  }
              },
              toolbox: {
                show: true,
                // orient: "vertical",
                // x: "right",
                // y: "center",
                right: 50,
                feature: {
                  restore: { show: true, title:'还原'},
                  magicType: { show: true, type: [ 'line', 'bar', 'stack', 'tiled'] },
                  saveAsImage: { show: true, title:'保存为图片' },
                  dataView: { show: true, title:'数据视图' },
                }
              },
              legend: {
                  data: ['高血压', '心脏病', '糖尿病']
              },
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
              },
              xAxis: {
                  type: 'value',
              },
              yAxis: {
                  type: 'category',
                  data: ['>65岁', '46-65岁', '21-45岁', '13-20岁', '7-12岁', '4-6岁', '0-3岁']
              },
              // color: ['#4D7CF2','#CB7BF4', '#FE438A', '#29CC70', '#F3CB2A','#F34254'],
              series: [
                  {
                      name: '高血压',
                      type: 'bar',
                      label: {
                          show: true,
                          position: 'insideRight'
                      },
                      data: [320, 302, 301, 334, 390, 330, 320]
                  },
                  {
                      name: '心脏病',
                      type: 'bar',
                      label: {
                          show: true,
                          position: 'insideRight'
                      },
                      data: [120, 132, 101, 134, 90, 230, 210]
                  },
                  {
                      name: '糖尿病',
                      type: 'bar',
                      label: {
                          show: true,
                          position: 'insideRight'
                      },
                      data: [220, 182, 191, 234, 290, 330, 310]
                  }
              ]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
          // window.addEventListener("resize",function(){
          //     myChart.resize();
          // });
            //  根据窗口大小调整曲线大小
          window.onresize = () => {
            myChart.resize();
          };
      },
      //城市选择
      regionChange (data) {
        console.log(data)
      },
    }
  }
</script>

<style scoped>
/* @import '~@assets/less/common.less'; */
/* 统计图 */
.chartdivs{
  width: 100%;
  height: 600px;
  margin-top: 30px;
}
</style>